<template>
    <div>
        <!-- 第一行  新增和预览按钮 -->
        <div class="button">
            <el-button type="primary" @click="toAdd">新增</el-button>
            <el-button type="primary" @click="toPreview">预览</el-button>
        </div>

        <!-- 第二行  表格 shift+alt+f-->
        <div class="table" style="margin-top: 20px;">
            <el-table :data="swipeData" border style="width: 100%">
                <el-table-column type="index" :index="1" label="序号" width="100" align="center">
                </el-table-column>
                <el-table-column label="图像" width="300" align="center">
                    <!-- 使用作用域插槽来获取当前行的数据 -->
                    <template slot-scope="scope">
                        <img width="160px" height="60px" :src="scope.row.url" alt="">
                    </template>
                </el-table-column>
                <!-- prop属性：这一列显示的内容多对应的属性/字段 -->
                <el-table-column label="轮播图信息" width="700" align="center">
                    <!-- 作用域插槽  prop只能接收一个数据，相同时显示两个数据就可以使用作用域插槽  -->
                    <template slot-scope="scope">
                        <!-- 绑定作用域 -->
                        <div>{{ scope.row.name }}</div>
                        <div>{{ scope.row.introduce }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" align="center">
                    <template slot-scope="scope">
                        <!-- 可以获取到当前行的数据   scope.row. 后接属性 -->
                        <el-link @click="toEdit(scope.row)" :underline="false" type="primary">编辑</el-link>
                        <el-link @click="toDelete(scope.row.id)" :underline="false" type="danger"
                            style="margin-left: 15px;">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 新增和编辑的模态框 -->
        <!-- @close是关闭模态框触发的事件 -->
        <el-dialog width="80%" @close="resetField" title="上传轮播图" :visible.sync="visible">
            <!-- model属性绑定的变量是表单对象 -->
            <!-- 表单校验，需要声明校验规则  ，使用prop对必填项进行校验 -->
            <!-- prop写在item上 -->
            <el-form :model="form" :rules="rules" ref="myForm">
                <!-- ref引用  有点类似于id -->
                <el-row type="flex" justify="">
                    <el-col :span="12">
                        <el-form-item label="轮播图名称" :label-width="formLabelWidth" prop="name">
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="轮播图介绍" :label-width="formLabelWidth" prop="introduce">
                            <el-input type="textarea" v-model="form.introduce"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label='图片上传' :label-width="formLabelWidth" prop="url">
                            <el-upload class="avatar-uploader" action="http://121.4.83.32:7006/UploadControlle/upload"
                                :show-file-list="false" :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="toSave">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 大屏预览 -->
        <el-dialog width="80%"  title="大屏展览" :visible.sync="visible1">
            <el-carousel indicator-position="outside">
                <el-carousel-item v-for="item in swipeData" :key="item.id">
                    <img height="100%" :src="item.url" alt="">
                </el-carousel-item>
            </el-carousel>
        </el-dialog>
    </div>
</template>

<script>
import { get, post } from '../../utils/request'
export default {
    data() {
        return {
            //表格源
            swipeData: [],
            //表单对象
            form: {},
            // 模态框标题
            title: "新增轮播图信息",
            //控制模态框显示与隐藏
            visible: false,
            // 控制大屏展览的模态框显示与隐藏
            visible1: false,
            // 表单域标签的宽度
            formLabelWidth: '120px',
            // 图片上传组件的图片路径、
            imageUrl: '',
            // 表单校验的规则
            rules: {
                name: [
                    { required: true, message: '请输入轮播图名称', trigger: 'blur' }
                    //blur：失焦，当我点击到模态框其他位置时触发
                ],
                introduce: [
                    { required: true, message: '请输入轮播图介绍', trigger: 'blur' }
                ],
                url: [
                    { required: true, message: '请上传轮播图', trigger: 'change' }
                ]
            }
        }
    },

    methods: {
        // 获取所有轮播图
        async getSwipe() {
            let res = await get('/carousel/findAll')
            console.log(res, '获取响应');
            // 将后端获取数据赋值给表格数据源
            this.swipeData = res.data
            // console.log(this.swipes.url);
        },
        toDelete(id) {
            console.log(id, '当前行的id')
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                //表示点击了确定按钮  发起删除请求  (形参)=>{函数体}
                // se6对象简写语法  变量名和属性名可以一直简写为属性名 id:id 简写为id
                let res = await get('/carousel/deleteById', { id })
                this.$message({
                    type: 'success',
                    message: res.message
                });
                // 重新载入数据
                this.getSwipe()

                //表示点击了取消按钮  取消删除
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //图片上传成功的回调函数
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            //上传图片成功后 将图片地址设置给表单对象url属性
            this.form.url = res.data;
        },
        // 在图片上传之前触发的函数
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        //去新增
        toAdd() {
            //模态框显示
            this.visible = true;
            //标题
            this.title = '新增轮播图信息';
            //清空表单
            this.form = {};
            //清空图片
            this.imageUrl = ''
        },
        //对表单进行校验
        toSave() {
            this.$refs['myForm'].validate(async (valid) => {
                if (valid) {
                    alert('提交成功');
                    //校验通过--》发起一个保存请求
                    let res = await post('/carousel/saveOrUpdate', this.form);
                    if (res.status === 200) {
                        this.$message({
                            type: 'success',
                            message: res.message
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.message
                        })
                    };
                    this.getSwipe();
                    this.visible = false
                }

                else {
                    return false;
                }
            })
        },
        //编辑
        toEdit(row) {
            // 打印当前行数据
            console.log(row);
            this.title = '修改轮播图信息';
            this.visible = true;
            // 把当前行数据设置给对象
            this.form = { ...row }
            this.imageUrl = this.form.url
        },
        // 关闭模态框清空表单校验规则
        resetField() {
            this.$refs.myForm.resetFields()
        },
        //大屏预览
        toPreview() {
            this.visible1 = true;
        },
    },
    created() {
        this.getSwipe()
        // console.log(res, '获取响应')

    }
}
</script>

<style lang="scss" scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>